<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery版本单dom节点</title>
    <style>

        .box{
            width:100px;
            height: 100px;
            border: 1px solid;
        }

        .success{
            background-color: #00FF00;
        }

    </style>
</head>
<body>

<div id="box1" >



</div>
</body>
<script src="../../lib/jquery.js"></script>
<script>
    /**
     *     DOM
     *       单节点
     *  1. 通过选择器 获得dom节点的引用
     *  2. 对单个dom节点进行修改
     *        1. 内容--- innerHTML innerText
     *        2. 属性---
     *                 一般属性：id src href
     *                 样式：style class --- className classList
     *                 事件：click、change、mouseover
     * */

    $('#box1').html('hello');
    $('div').text('world');

  //  alert( $('#box1').html())

   // $('#box1').attr('id','test');// 属性名称 属性值

    $('#box1').addClass('box').addClass('success');


  /*  $('#box1').click(function () {
        alert($(this).html());
    })
    */
    // 告知干什么，但是没有实现细节
    /**
     *  把经常变动 和 基本不变的内容 分开处理
     * **/
    $('#box').bind('click',boxClick);

    function boxClick() {
        alert($(this).html());
    }

</script>

</html>